<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="$t('所有序列号') + '   ' + 'sku:' + form.skuNo"
    width="1400px"
    destroy-on-close
    :close-on-click-modal="false">
    <div>
      <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item :label="$t('序列号')" prop="">
          <el-input v-model="queryParams.id" />
        </el-form-item>
        <el-form-item :label="$t('出库情况')" prop="">
          <el-select style="width: 150px" clearable v-model="queryParams.isOutWarehouse">
            <el-option :label="$t('是')" :value="1" />
            <el-option :label="$t('否')" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('上架情况')" prop="">
          <el-select style="width: 150px" clearable v-model="queryParams.isOnShelf">
            <el-option :label="$t('是')" :value="1" />
            <el-option :label="$t('否')" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('装箱情况')" prop="">
          <el-select style="width: 150px" clearable v-model="queryParams.isEncasement">
            <el-option :label="$t('是')" :value="1" />
            <el-option :label="$t('否')" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('入库类型')" prop="">
          <el-select style="width: 150px" clearable v-model="queryParams.inWarehouseType">
            <el-option
              :label="item.dictLabel"
              :value="item.dictValue"
              v-for="item in in_warehouse_type_list"
              :key="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('出库类型')" prop="">
          <el-select style="width: 150px" clearable v-model="queryParams.outWarehouseType">
            <el-option
              :label="item.dictLabel"
              :value="item.dictValue"
              v-for="item in out_warehouse_type_list"
              :key="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
            {{ $t('搜索') }}
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
            {{ $t('重置') }}
          </el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="skuUrlList" :height="calTableHeight() - 100">
        <el-table-column show-overflow-tooltip :label="$t('序列号')" align="center" prop="id" width="200" />
        <el-table-column
          show-overflow-tooltip
          :label="$t('过期时间')"
          width="150"
          align="center"
          prop="expiredTime">
          <template slot-scope="{ row }">
            <!-- 是否装箱 0-否 1-是 -->
            <div>{{ row.expiredTime ? row.expiredTime : $t('未设置') }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('装箱情况')" align="center" prop="isEncasement">
          <template slot-scope="{ row }">
            <!-- 是否装箱 0-否 1-是 -->
            <div v-if="row.isEncasement == 0" style="color: red">{{ $t('否') }}</div>
            <div v-if="row.isEncasement == 1" style="color: green">{{ $t('是') }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('上架情况')" align="center" prop="isOnShelf">
          <template slot-scope="{ row }">
            <!-- 	是否上架 0-否 1-是-->
            <div v-if="row.isOnShelf == 0" style="color: red">{{ $t('否') }}</div>
            <div v-if="row.isOnShelf == 1" style="color: green">{{ $t('是') }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('出库情况')" align="center" prop="isOutWarehouse">
          <template slot-scope="{ row }">
            <!-- 是否出库  0-否 1-是 -->
            <div v-if="row.isOutWarehouse == 0" style="color: red">{{ $t('否') }}</div>
            <div v-if="row.isOutWarehouse == 1" style="color: green">{{ $t('是') }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('入库类型')" align="center" prop="inWarehouseType">
          <template slot-scope="{ row }">
            <span :style="{ color: $randomColor(row.inWarehouseType) }">
              {{ handleType(row.inWarehouseType, 'in') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          :label="$t('入库业务id')"
          align="center"
          width="200"
          prop="inWarehouseBusinessId" />
        <el-table-column show-overflow-tooltip :label="$t('出库类型')" align="center" prop="outWarehouseType">
          <template slot-scope="{ row }">
            <span :style="{ color: $randomColor(row.outWarehouseType) }">
              {{ handleType(row.outWarehouseType, 'out') }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          :label="$t('出库业务id')"
          align="center"
          width="200"
          prop="outWarehouseBusinessId" />
        <el-table-column
          show-overflow-tooltip
          :label="$t('创建时间')"
          width="150"
          align="center"
          prop="createTime" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />

      <!-- 添加或修改商品SKU链接对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item :label="$t('参考链接')" prop="asinCode">
            <el-input v-model="form.asinCode" placeholder="https://www.amazon.co.jp/dp/B000V4OBBE" />
          </el-form-item>
          <el-form-item :label="$t('备注')">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="handleSubmit">{{ $t('确定') }}</el-button>
          <el-button @click="cancel">{{ $t('取消') }}</el-button>
        </div>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
import { getPurchaseSkuSerializableListBySkuDetails } from '@/api/distribution/sku/serial'
import { useDict } from '@/utils/useDict'

export default {
  name: 'SkuUrl',
  data() {
    return {
      /**出库类型 */
      out_warehouse_type_list: [],
      /**入库类型 */
      in_warehouse_type_list: [],
      dialogTitle: '',
      showDialog: false,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品SKU链接表格数据
      skuUrlList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        inWarehouseType: '',
        outWarehouseType: '',
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        asinCode: '',
        remark: '',
        skuId: '',
        skuNo: '',
      },
      // 表单校验
      rules: {
        asinCode: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },
  created() {
    // this.getList();
  },
  methods: {
    getDictList() {
      useDict('out_warehouse_type').then(({ out_warehouse_type }) => {
        this.out_warehouse_type_list = out_warehouse_type.filter((i) => i.dictName == '出库类型')
        this.in_warehouse_type_list = out_warehouse_type.filter((i) => i.dictName == '入库类型')
      })
    },
    handleType(type, _type) {
      if (_type == 'in') {
        const index = this.in_warehouse_type_list.findIndex((i) => i.dictValue == type)
        return this.in_warehouse_type_list[index]?.dictLabel
      } else {
        const index = this.out_warehouse_type_list.findIndex((i) => i.dictValue == type)
        return this.out_warehouse_type_list[index]?.dictLabel
      }
    },
    handleSubmit() {},
    handleOpen({ title, skuInfo }) {
      this.dialogTitle = title
      const { skuId, skuNo } = skuInfo
      this.form.skuId = skuId
      this.form.skuNo = skuNo
      this.queryParams.skuId = skuId
      this.getList()
      this.getDictList()
      this.showDialog = true
    },
    /** 查询商品SKU链接列表 */
    getList() {
      this.loading = true
      getPurchaseSkuSerializableListBySkuDetails({ ...this.queryParams, skuId: this.form.skuId }).then(
        (response) => {
          this.skuUrlList = response.rows
          this.total = response.total
          this.loading = false
        },
      )
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form.asinCode = ''
      this.form.remark = ''
      // this.form = {
      //   id: undefined,
      //   skuId: undefined,
      //   skuNo: undefined,
      //   asinCode: undefined,
      //   createBy: undefined,
      //   createTime: undefined,
      //   updateBy: undefined,
      //   updateTime: undefined,
      //   remark: undefined,
      // };
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
  },
}
</script>
